<template>


	<div>
		<div :class="mask" @click.native="hiddenMask">
		</div>
		<div>
			<div>
				<ul class="menu">
					<li><a href="">1</a></li>
					<li><a href="">2</a></li>
					<li><a href="">3</a></li>
					<li><a href="">4</a></li>
					<li><a href="">5</a></li>
					<li><a href="">6</a></li>
					<li><a href="">7</a></li>
					<li><a href="">8</a></li>
				</ul>
			</div>

			<div class="flotdemo">
				<div class="d1"></div>
				<div class="d2"></div>
			</div>
			<button class="btn" @click="showMask">弹出遮罩</button>
		</div>
	</div>


</template>

<script>
    export default {
        name: "demo",
        data() {
            return {
                mask: ''
            }
        },
        methods: {
            showMask() {
                this.mask = 'mask'
            },
            hiddenMask() {
                alert('==')
                this.mask = 'mask2';
            }
        }
    }
</script>

<style scoped>
	.menu {
		background-color: aquamarine;
		width: 808px;
		height: 90px;
		margin: 10px auto;
		border: 1px solid black;
		list-style: none;
		padding: 0px;
	}

	.menu li {
		display: inline-block;
		height: 90px;
		width: 100px;
		background-color: wheat;
		border-right: 1px solid red;
	}

	.menu li a {
		background-color: forestgreen;
		display: block;
		height: 90px;
		text-align: center;
		line-height: 90px;
	}

	.menu li a:hover {
		background-color: wheat;
	}

	.flotdemo {
		border: 1px solid rebeccapurple;
		width: 860px;
		height: 60px;
		margin: 40px auto;
	}

	.d1 {
		background-color: pink;
		height: 60px;
		width: 60px;
		display: inline-block;
	}

	.d2 {
		background-color: darkcyan;
		height: 60px;
		width: 60px;
		display: inline-block;
		float: right;
	}

	.mask {
		background-color: black;
		opacity: 0.6;
		flex: 1;
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 10;
	}
	.mask2{
		background-color: red;
		opacity: 0.6;
		flex: 1;
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 10;
	}

	.btn {
		background-color: red;
		color: #fff;
		font-size: 20px;
	}


</style>